<template>
  <div class="etp">
    <panel-top :coin_type="coin_type"/>
    <section>
      <div class="header">{{$t('statistics.configuration')}}</div>
      <div class="content">
        <div class="r">
          <div class="c border"><span><i class="iconfont icon-jiedian1"></i>{{$t('statistics.dug_address')}}</span></div>
          <div class="c">
            {{$t('statistics.etp_info6')}}<br>
            {{$t('statistics.eth_address')}}:stratum+tcp://etp.s.dpool.top:8008
          </div>
        </div>
      </div>
    </section>
    <section>
      <div class="header">
        <div class="button-box">
          <button class="btn" :class="{active:!showIndex}" @click="showIndex = 0;">{{$t('statistics.pool_detail')}}</button>
          <button class="btn" :class="{active:showIndex}" @click="showIndex = 1;">{{$t('statistics.pay')}}</button>
        </div>
      </div>
      <template v-if="!showIndex">
        <statistics-echarts :coin_type="coin_type"/>
        <detail-table :coin_type="coin_type"/>
      </template>
      <payment-table :coin_type="coin_type" v-else/>
    </section>
  </div>
</template>
<script>
import panelTop from './common/panelTop';
import statisticsEcharts from './common/statisticsEcharts';
import detailTable from './common/detailTable';
import paymentTable from './common/paymentTable';

export default {
  components: {
    panelTop,
    statisticsEcharts,
    detailTable,
    paymentTable,
  },
  data() {
    return {
      coin_type: 'etp',
      showIndex: 0,
    };
  },
};
</script>
<style lang="scss" scoped>
.etp{
  section{
    .header{
      overflow: hidden;
      .button-box{
        margin-top: 10px;
        height: 30px;
        line-height: 28px;
        border-width: 1px;
        border-style: solid;
        font-size: 12px;
        border-radius: 3px;
        display: flex;
        background-color: #fff;
        border-color: #eaeaea;
        width: 240px;
        overflow: hidden;
        .btn{
          outline: none;
          border:none;
          flex: 1;
          border-right: 1px solid #eaeaea;
          background-color: #fff;
          &:last-of-type{
            border: none;
          }
          &.active{
            background-color: #247ba0;
            color: #fff;
          }
        }
      }
    }
    .item-content{
      height: 465px;
    }
    .todetai{
      color: #247ba0;
    }
    .label{
      &.label-success{
        color: #70c1b3;
      }
      &.label-danger{
        color: #eb547c;
      }
    }
  }
}
</style>
